<template>
  <div class="app-container">
    <el-form>
      <div class="params head-form">
        <el-form-item label="状态">
          <el-select v-model="params.status" @change="init" style="flex: 1">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入关键词" @blur="init" v-model="params.name">
            <template #prepend>
              <el-select v-model="params.type" placeholder="请选择" @change="init" style="width: 115px">
                <el-option v-for="(item, index) in type" :label="item" :value="Number(index)" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
          <el-button :icon="Plus" type="primary" @click="openModal"> 新建其他合作方 </el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="table-container">
      <div class="table-head">
        <div>合作方ID</div>
        <div>合作方名称</div>
        <div>合作方类型</div>
        <div>备注</div>
        <div>联系方式</div>
        <div>禁用/启用</div>
        <div>关联账号</div>
        <div>添加时间</div>
        <div>操作</div>
      </div>
      <div class="loading" v-if="loading" v-loading="loading"></div>
      <el-empty v-if="!data.length && !loading" />
      <el-scrollbar max-height="calc(100vh - 320px)">
        <div class="table-content">
          <div v-for="item in data">
            <div>{{ item.partnerId }}</div>
            <div>{{ item.name }}</div>
            <div>{{ type[item.type] }}</div>
            <div class="align-left">{{ item.remark || "--" }}</div>
            <div>
              <span>{{ item.contacts ? item.contacts?.substring(0, 3) + "****" + item.contacts?.substring(7) : "--" }}</span>
              <el-popover :width="200" trigger="click" placement="right" :popper-style="{ padding: 0 }">
                <template #reference>
                  <el-icon v-if="item.contacts">
                    <PhoneFilled />
                  </el-icon>
                </template>
                <div class="contacts">
                  <div>电话：{{ item.contacts }}</div>
                  <div>名称：{{ item.name }}</div>
                </div>
              </el-popover>
            </div>
            <div>
              <el-tag>{{ item.status ? "启用" : "禁用" }}</el-tag>
            </div>
            <div class="link" @click="toPath(item)" v-if="item.thirdTag">{{ item.name }}</div>
            <div v-else>--</div>
            <div>{{ item.addTime }}</div>
            <div>
              <el-button type="primary" v-if="![1, 2, 7].includes(item.type)" link @click="openModal(item)">编辑</el-button
              ><span v-else>--</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="query.current"
        v-model:page-size="query.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="init"
        @current-change="init"
      />
    </div>
    <el-dialog v-model="visible" width="500" center align-center show-close @close="resetModal">
      <template #title>
        <custom-title :title="(isNew ? '添加' : '编辑') + '其他合作方'" />
      </template>
      <el-form :model="form" ref="formRef" label-width="auto" :rules="rules">
        <el-form-item label="合作方类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option v-for="(item, index) in addType" :label="item" :value="Number(index)" />
          </el-select>
        </el-form-item>
        <el-form-item label="合作方名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="联系方式" prop="contacts">
          <el-input v-model="form.contacts" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #007dff" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="comfirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Plus } from "@element-plus/icons-vue";
import { getList, add, edit } from "@/apis/collaborators";
import { microAppMainRouter } from "@/microApp";
import { ElMessage } from "element-plus";
import { type } from "@/utils/config";

const query = ref({
  current: 1,
  size: 10
});
const addType = {
  3: "其他",
  4: "项目经理",
  5: "物流运输",
  6: "工人"
};

const loading = ref(false);
const params = ref({
  name: undefined,
  status: undefined
});
const form = ref({
  status: 1
});
const resetModal = () => {
  form.value = { status: 1 };
  formRef.value.resetFields();
};
const toPath = item => {
  if (item.type == 1) {
    microAppMainRouter("push", {
      path: "/crm/client-info",
      query: {
        customerId: item.thirdTag
      }
    });
  } else if (item.type == 2) {
    microAppMainRouter("push", {
      path: "/suppliers/mange",
      query: {
        name: item.name
      }
    });
  } else if (item.type == 7) {
    microAppMainRouter("push", {
      path: "/sys/org",
      query: {
        name: item.name
      }
    });
  }
};
const isNew = ref(true);
const formRef = ref(null);
const visible = ref(false);
const data = ref([]);
const total = ref(0);
const init = async () => {
  const res = await getList(query.value, params.value);
  data.value = res.data.list;
  total.value = res.data.total;
  loading.value = false;
};
const mobileVerify = (rule, value, callback) => {
  const regex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (regex.test(value)) {
    callback();
  } else if (!value) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号"));
  }
};
const rules = {
  name: [{ required: true, message: "请输入合作方名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择合作方类型", trigger: "blur" }],
  contacts: [{ validator: mobileVerify, trigger: "blur" }],
  remark: [{ max: 100, message: "备注不能超过100个字符" }]
};
const reset = () => {
  data.value = [];
  loading.value = true;
  params.value = {};
  init();
};
const openModal = item => {
  if (item.partnerId) {
    isNew.value = false;
    form.value = { ...item };
  } else {
    isNew.value = true;
  }
  visible.value = true;
};
const comfirm = () => {
  formRef.value.validate(async valid => {
    if (!valid) return;
    if (isNew.value) {
      const res = await add(form.value);
      if (res.code == 200) {
        visible.value = false;
        ElMessage.success("新增成功");
        init();
      }
    } else {
      const res = await edit(form.value);
      if (res.code == 200) {
        visible.value = false;
        ElMessage.success("编辑成功");
        init();
      }
    }
  });
};
onMounted(() => {
  loading.value = true;
  init();
});
</script>

<style lang="scss" scoped>
$border: 1px solid #dcdfe6;

.loading {
  height: 300px;
}

.params {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 2fr);
}

.table-container {
  border: $border;
  line-height: 50px;
  text-align: center;

  @mixin col {
    min-height: 50px;
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr) 2fr repeat(2, 1fr) 1.5fr 1fr 0.5fr;

    > :last-child {
      border-left: $border;
    }
  }

  .table-head {
    @include col;
    background: #f2f6fc;
    color: #909399;
    border-bottom: $border;
  }

  .table-content {
    > div {
      height: auto;
      @include col;
      border-bottom: $border;
      color: #4e5969;

      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        line-height: 28px;
        gap: 8px;

        .el-icon {
          color: #007dff;
        }
      }
    }

    :last-child {
      border: none;
    }

    > div:nth-child(even) {
      background: #f5f7fa;
    }
    .align-left {
      justify-content: left;
    }
  }

  .link {
    color: #007dff;
    text-decoration: underline;
    cursor: pointer;
  }
}

.contacts {
  > div {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
  }

  > div:first-child {
    border-bottom: $border;
  }
}
</style>
<style lang="scss">
.el-popover {
  .contacts + .el-popper__arrow {
    &::before {
      display: none;
    }
  }
}
</style>
